Revolution elements es una plantilla de Wordpress diseñada por Jason Schuller y adaptada a Blogger por Joyful Thiek

Me gustó nada más verla, pero lo que más llamó mi atención fue el menú que sobre fondo oscuro resalta más la elegancia de la plantilla.

Conseguir ese menú no es complicado cuando con anterioridad alguien tuvo la genial idea de crearlo. En plantilla Edición de HTML justo antes de ]]></b:skin> añadimos los estilos.


/* Navigation Menu
------------------------------------------------*/
ul.nav {
list-style:none;
background:url(url-imagen-fondo-menu) top left no-repeat;
float:right;
color:#BDAFA8;
margin:20px 0px 0px 0px;
height:65px;
width:522px;
padding:8px 0px 0px 18px;
}
.nav li{
border-right:1px solid #333333;
float:right;
display:block;
width:100px;
}
.nav li a{
font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
outline:none;
color: #eeeeee; /*#62C214;*/
text-decoration:none;
display:block;
padding:5px 0 12px 5px;
width:95px;
text-transform:uppercase;
}
.nav li a span{
font-size:12px;
color:#7f7f7f;
text-transform:lowercase;
}
.nav li a:hover{
background: url(url-imagen-transparencia);
color: white;
width:95px;
}
* html .nav li a:hover{
background:#e6e6e6;
width:99px;
}
.nav li.skip{
border-right: 0px;
margin-right: 23px;
display:block;
width:93px;
}
.nav li.skip a{
width:93px;
}
/*.nav li.skip a:hover, li.top a:hover {
color: #e6e6e6 !important;*/
}
.fix:after{
content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}
.fix{
display:inline-block;
}
* html .fix{height:1%;}
.fix{display:block;}
ul.downnav {
list-style: none;
margin-bottom:20px;
}
li.down-top{float:right;display:block; width:100px;}
li.down-top a{width:100px;}


Guardamos los cambios y en un gadget de HTML que más tarde arrastraremos hasta el lugar indicado incluimos lo siguiente:

<div class="nav">
<ul class="nav fix">
<li class="skip"><a href="url del enlace" title="Descripción">LINK4
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK3
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK2
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK1
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">Home
<span>Descripción </span></a></li>
</ul>
</div>

El resultado sería más o menos así:




El menu contiene dos imágenes, una de fondo que añadimos en los estilos de la plantilla donde dice url-imagen-fondo-menu



La otra imagen es una transparencia para el efecto hover y la añadimos donde dice url-imagen-transparencia.



Naturalmente para añadir las imágenes antes debemos alojarlas en un servidor para conseguir la url, yo siempre recomiendo alojar las imágenes en una entrada de Blogger que más tarde guardaremos en borrador.

Si el fondo de nuestro blog no es oscuro o simplemente deseamos una fuente en color distinto podemos modificar los estilos.

» El texto siempre viene definido en la hoja de estilos con "color" en este caso para el texto superior buscamos ul.nav y sustituimos color:#BDAFA8;

» Si se trata del texto inferior buscaremos nav li a span y modificamos color:#7f7f7f;

» Para el tamaño modificamos según el texto con font-size.

» Hay una barrita vertical apenas perceptible en el fondo oscuro que separa el texto de los enlaces, podemos cambiar su color en nav li donde dice border-right:1px solid #333333;

» Configuramos el menu en el gadget de HTML y añadimos la página a enlazar donde dice url del enlace

» En title donde Descripción es el sitio donde incluimos el texto que aparece al pasar el ratón.

» Sustituimos LINK1- LINK2- LINK3- LINK4- por el texto del enlace que vamos a mostrar.

» Igual haremos con Home podemos sustituirlo o dejarlo así y enlazar con la url de nuestro blog para actualizar la página.




Deybi

Bellísimo. Lo quiero para mi blog. Primero unos arreglos para buscarle espacio.

¡Un abrazo por ello!.

Responder
Susy

Desde luego es preciosa,
Gem@, estoy fuera de casa y te envío un abrazo.

Responder
Anónimo

Pásate por Antigua y Medieval a recoger el 'Premio Blog Dorado'

http://antiguaymedieval.blogspot.com/2009/06/premio-blog-dorado.html

Responder
Gem@

yz Me alegra que te guste Deybi :)

yz Hola Susy, yo también estaba fuera cuando ha llegado tu abrazo y te envío otro aunque sigas fuera seguro que llega :D

yz Muchas gracias Unhidalgo muy amable de tu parte :)

Responder
Admin

Hola gema necesito un poco de tu ayuda en uno de mis blog, resulta que dicho blog tenia 2 sidebar y yo elimne 1.
Ahora quiero acomodar el contenido y la otra sidebar y cuando cambio las medidas se me relaja todo , si me pudieras ayudar te lo agradeseria muchisimo

Responder
Gem@

yz Hola P4BLQ lo primero de tod crea una copia de la plantilla por si olvidas las medidas iniciales.
No entiendo muy bien eso de "se relajada todo" ¿quieres decir que la sidebar se desplaza?
Tendría que ver online ese problema, para saber a qué se debe, añade eso que deseas añadir y me avisas ;)

Responder
Admin

Yo lo que quiero es colocar la sidebar y el contenido en donde coresponde, que seria las zonas grises que hay de fondo, yo ahora aparentemente lo solucione, pero sigo encontrando restos de codigo pertenecientes a la sidebar que borre (sino me equiboco), ahora que tengo ubicado todo donde deberia, me aparece una franja negra sobre el lado derecho del blog que no se de donde aparecio.

Responder
Gem@

yz ¿De qué blog estamos hablando P4BLQ ?

Responder
Admin

Huy perdona me olvide de poner el link, aunque creo haberlo hecho quisas no de la manera que debia.
El blog es el siguiente http://balneariosantana.blogspot.com/

Responder
del batitú

Hola Gem@, me encantó el menú y ya lo agregué en un blog de pruebas antes de ponerlo definitivamente en el mío. Ahora, me quedó demasiado pegado a las entradas y muy separado de la cabecera, podrías indicarme cuáles son esas distancias para modificarlas? Gracias por tu siempre atenta dedicación. un abrazo, Laura :D

Responder
Gem@

:: Hola Laura :)
Mira los márgenes donde dice margin:20px 0px 0px 0px; y prueba con margin:-60px 40px 5px 70px;
Ese menú me encantó desde el primer día que lo vi de tan sencillo es elegante :)

Responder
del batitú

hola Gem@, yo otra vez, sabés que no hay caso, he cambiado ese margen como para que el gadget se moviera de arriba abajo y de derecha a izquierda, pero nada, no se mueve no importa cuánto lo cambie. qué será?
esa en un gadget del header, porque en la cabecera me quedaba muy pegado. te lo mando para que lo veas, lo quiero exactamente debajo de la cabecera. gracias por tu tiempo, genia!
prueba

Responder
del batitú

ahora sí, acá está la prueba
:D

Responder
Gem@

:: del batitú pues si lo quieres más cerca habrá que seguir probando...
Busca lo siguiente y ese 80 que tienes déjalo en auto 0

#header-wrapper {
border:0 solid #000000;
margin:30px auto 0;

De todas formas sería conveniente que dieras salida al menos a una entrada porque verás mejor la forma de ubicar el menú ;)

Responder
del batitú

gracias Gem@, hice algunos cambios, sigo probando.:D

Responder
Gem@

:: Estupendo del batitú :)

Responder
del batitú

hola Gema, disculpame que te moleste con el mismo tema, pero estoy desesperadaaaa, resolví bárbaro este precioso menú hace días. Ahora estuve sacando el subrayado de los enlaces, todo bien, y hoy estaba intentando dar un efecto hover en mi nube de etiquetas, pero no lo conseguí, muy confiada cometí el error de no copiar la plantilla antes, y no sé cómo se me modificó el menú, sin que lo hubiera tocado, no sé qué pasó ni cómo arreglarlo!!!! socorro Gema!!! en mi blog principal fue el espanto, y tengo otro blog que aspira a ser un link del principal, donde el menú está perfecto, pero como los había dejado distintos, acorde a cada blog, al compararlos no entiendo lo que pasó, snif snif, podrás verlo y ayudarme??
acá está el horror blog principal
acá el emnú está bienel otro blog
LAura

Responder
Gem@

:: Le has añadido una clase al menú donde dice a class="tooltip" y eso hace que el menú se adapte a los estilos de esa clase.
Repasada el gadget donde añades los enlaces y prueba de la misma forma que viene en el ejemplo.
La imagen por favor súbela a tu servidor, me di cuenta que estás utilizando la misma url de la imagen del ejemplo y con eso lo que se consigue es que si elimino alguna vez el álbum de Picasa donde se encuentra te quedes sin imagen ;)

Responder
del batitú

gracias Gem@, voy a hacer los arreglos,:$ pero me había quedado bien, tal como en el blog de prueba, será que cuando cambié el subrayado de los enlaces, eso modificó también el menú? no intenté nada esperando tu respuesta. :O
luego te comento. gracias otra vez.

Responder
del batitú

no hay caso, creo que me rindo :-I.
saqué el "tooltip" (si vas al link: piedra, vas a ver que el menú queda bien con el tooltip en el otro blog), dejé el gadget tal como en el ejemplo, y subí las imágenes a mi servidor.

volví a ponerle el subrayado a los enlaces, por las dudas que fuera eso lo que desbarató todo, ya que fue lo último que hice antes de que se modificara el menú, y no hay forma de volver a lo que era. No te aburro más querida Gem@, no veo cómo arreglarlo. abrazos.

Responder
Gem@

:: del batitú a veces es mejor cortar por lo sano y empezar de nuevo, vas a tardar menos si lo haces paso a paso que intentando arreglar un descosido ;)

Responder
del batitú

Muy buen consejo Gem@, gracias. :D

Responder
Postcards from Paris

Hola Gemma!

Acabo de descubrir tu blog y la verdad es que ando encantada, mil gracias por tu labor. He modificado algo la plantilla de este menu pero no consigo quitar el sombreado que aparece al poner el ratón sobre los links. ¿puedes ayudarme?

Gracias por anticipado

http://postcardsfromparisarecoming.blogspot.com

Responder
Gem@

:: Anna liebheart para eliminar ese efecto hover de sombra hay una parte que dice más o menos lo siguiente (al final de los estilos) sólo hay quw cambiar el color background:#e6e6e6; por background:transparent;

* html .nav li a:hover{
background:transparent;
width:99px;
}

Responder
Vero Rodriguez

Hola Gema ¿como puedo hacer que haya mas espacio entre las palabras? porque me quedan cortadas si escribo mucho por ejemplo el segundo link en www.huertaspeuhec.blogspot.com
mil gracias por la ayuda

Responder
Gem@

:: Hola Vero, si te refieres al segundo link de Calendario Biodinámico 2011 yo no lo veo cortado, pero el espaciado entre palabras se consigue con la propiedad word-spacing

.tabs-inner .widget li a {
word-spacing:30px;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
color: #990000;
display: inline-block;
font: bold 14px Unkempt;
margin: 0;
padding: 0.6em 1.5em;
}

Responder
Vero Rodriguez

mno,el que me queda cortado es dentro del menu revolution el segundo boton que dice "implementacion y objetivos" debajo de la cabecera, me queda chico necesito alargar ese espacio

Responder
Vero Rodriguez

hola Gema como puedo cambiar el tipo de letra porque queda muy fina, me gustaria ponerle una letra mas gruesa o en negrita. gracias!!

Responder
Gem@

:: Vero en la entrada añadí donde cambiar algunas cosas del menú por ejemplo:
el texto superior buscamos ul.nav
texto inferior buscaremos nav li a span
Aumentando el valor en font-size estamos aumentando el tamaño de la fuente o añadiendo font-weight:bold estamos convirtiendo la letra en negrita :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top